<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体风格设置和字体加粗设置</title>
    <style type="text/css">
        body {
            font-size: 40px;
        }
        .font-normal{
            font-style:normal;
        }
        .font-italic {
            font-style: italic;
        }
        .font-oblique {
            font-style: oblique;
        }

        .weight100{
            font-weight: 100;
        }
        .weight200 {
            font-weight: 200;
        }
        .weight400 {
            font-weight: 400;
        }
        .weight700 {
            font-weight: 700;
        }
        .weight900 {
            font-weight: 900;
        }
        .weight-lighter {
            font-weight: lighter;
        }
        .weight-normal {
            font-weight: normal;
        }
        .weight-bold {
            font-weight: bold;
        }
        .weight-bolder {
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <!-- 字体风格设置 -->
    <p class="font-normal">normal</p>
    <p class="font-italic">倾斜设置：italic</p>
    <p class="font-oblique">倾斜设置：oblique</p>
    <br/>

    <!-- 字体加粗设置 -->
    <p class="weight100">weight 100</p>
    <p class="weight200">weight 200</p>
    <p class="weight400">weight 400</p>
    <p class="weight700">weight 700</p>
    <p class="weight900">weight 900</p>
    <p class="weight-lighter">weight lighter</p>
    <p class="weight-normal">weight normal</p>
    <p class="weight-bold">weight bold</p>
    <p class="weight-bolder">weight bolder</p>
</body>
</html>